<!-- 我的团队 -->
<template>
    <view class="page_box team-wrap">
		<view class="team-data-box">
			<view class="data-card">
				<view class="total-item">
					<view class="item-title">
						<image class="referrer-avatar u-m-r-10" :src="referrerInfo.avatar" mode=""></image>
						{{ referrerInfo.nickname }}
					</view>
					<view class="total-num">当前级别成员: {{ total || 0 }}</view>
				</view>				
			</view>
		</view>
		
        <view class="content_box">
            <scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
                <!-- 团队列表 -->
                <view class="team-box">
                    <view class="team-list" v-for="(item, index) in teamList" :key="item.id">
                        <sh-collapse-item
                            :avatar="item.avatar"
                            :dateTime="item.createtime"
                            :level="item.agent ? item.agent.level : null"
                            :name="item.nickname"
                            :isUnfold="item.isUnfold"
                            :childNum="item.child_num"
                            @click="onTeamList(item.id)"
                        >
                        </sh-collapse-item>
						<view class="end-btn">
							<u-button size="mini" @click="onAgentView(item.id)">资料</u-button>
							<u-button size="mini" @click="onTeamList(item.id)">团队</u-button>
						</view>
                    </view>
                </view>
                <!-- 缺省页 -->
                <shopro-empty v-show="isEmpty" marginTop="50rpx" :image="$IMG_URL + '/imgs/empty/no_team.png'" tipText="暂无团队人员"></shopro-empty>
                <!-- 更多 -->
                <u-loadmore v-if="teamList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
            </scroll-view>
        </view>
    </view>
</template>

<script>
import shCollapseItem from '../components/sh-collapse-item.vue';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
    components: {
        shCollapseItem
    },
    data() {
        return {
            backTextStyle: {
                color: '#fff',
                fontSize: '40rpx',
                fontWeight: '500'
            },
            isEmpty: false,

			referrerInfo: {},
            teamList: [], //团队列表
            loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
            currentPage: 1,
            lastPage: 1,
			total: 0,
            // 二级
            childrenTeamList: [],
            childrenCurrentPage: 1,
            childrenLastPage: 1,
            childrenLoad: false,
            isRefresh: false,
        };
    },
    computed: {
        ...mapState({
            userInfo: ({ user }) => user.userInfo,
            agentInfo: ({ user }) => user.agentInfo
        })
    },
    onLoad() {
        this.getTeam();
        // this.getAgent();
    },
    methods: {
        ...mapActions('user',['getAgent']),
        // 点击队员项
        onTeamList(id) {
            this.jump('/pages/app/agent/child-list', {parent_id:id});
        },
		onAgentView(id) {
		    this.jump('/pages/app/agent/view', {id:id});
		},
        jump(path, parmas) {
            this.$Router.push({
                path: path,
                query: parmas
            });
        },

        // 团队列表
        getTeam() {
            let that = this;
            that.loadStatus = 'loadmore';
            that.$http('agent.getchild', {
                page: that.currentPage,
                parent_id: that.$Route.query.parent_id
            }).then(res => {
                if (res.code === 1) {
                    that.referrerInfo = res.data.parent_user;
					that.total = res.data.teams.total;
                    let arr = res.data.teams.data;
                    arr.map(item => {
                        item.isUnfold = false;
                    });
                    that.teamList = [...that.teamList, ...arr];
                    that.isEmpty = !that.teamList.length;
                    that.lastPage = res.data.teams.last_page;
                    that.loadStatus = that.currentPage < res.data.teams.last_page ? 'loadmore' : 'nomore';
                }
            });
        },

        // 二级加载更多
        childrenLoadMore(id) {

            if (!this.isRefresh) {
                // 加载更多
                if (this.childrenCurrentPage < this.childrenLastPage) {
                    this.isRefresh = true;
                    this.childrenCurrentPage += 1;
                    this.getChildrenTeam(id);
                }
            }
        },

        // 加载更多
        loadMore() {
            if (this.currentPage < this.lastPage) {
                this.currentPage += 1;
                this.getTeam();
            }
        }
    }
};
</script>

<style lang="scss">
.end-btn{
	display:flex;
	justify-content: flex-end;
	align-items: center;
	padding:20rpx 0;
	padding-left:60%;
	.u-btn{width:30%;flex-shrink:0;flex:0}
}
// 推荐人
.referrer-box {
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
    margin-top: 10rpx;    
}
// 二级加载更多按钮
.refresh-btn {
    width: 100%;
    line-height: 100rpx;
    background: #ffffff;
    border-radius: 25rpx;
    font-size: 22rpx;
    font-weight: 500;
    color: #999999;
    white-space: nowrap;
    .cuIcon-refresh {
        color: #dbdbdb;
        margin-right: 12rpx;
        font-size: 32rpx;
    }
}
.refresh-active {
    transform: rotate(360deg);
    transition: all linear 0.5s;
}
// 头部卡片
.head_box {
    background: url($IMG_URL+'/imgs/commission/card_bg.png') no-repeat;
    background-size: 100% 100%;
    padding-bottom: 30rpx;
}
//数据展示BOX
.data-num-box {
    margin: 30rpx 20rpx 0;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx;

    .num-item{
        width:100%;
        margin:20rpx 10rpx;
        .item-title{
            font-size: 22rpx;
            font-weight: 500;
            color: #999999;
            line-height: 30rpx;
            margin-bottom: 10rpx;
        }
        .total-num{
            font-size: 24rpx;
            font-weight: 500;
            color: #333333;
        }

    }

}

// 团队信息总览
.team-data-box {
    padding: 30rpx;
    background: #ffffff;
	border-bottom:10rpx solid #eee;
    .data-card {
        
        
		.referrer-avatar {
			width: 34rpx;
			height: 34rpx;
			border-radius: 50%;
		}
        .item-title {
            font-size: 22rpx;
            font-weight: 500;
            color: #999999;
            line-height: 30rpx;
            margin-bottom: 10rpx;
			display:flex;
			align-items: center;
        }

        .total-item {
            
        }

        .total-num {
            font-size: 24rpx;
            font-weight: 500;
            color: #999;
			margin-top: 20rpx;
        }

        .category-num {
            font-size: 26rpx;
            font-weight: 500;
            color: #333333;
        }
    }
}

// 团队列表
.team-box {
    .team-list {
		background: #fff;
		border-bottom:10rpx solid #eee;
        .team-children {
            margin-left: 80rpx;
            margin-right: 20rpx;
            height: 132rpx;
            border-bottom: 1rpx solid #eee;

            .head-img {
                width: 60rpx;
                height: 60rpx;
                border-radius: 50%;
                margin-right: 38rpx;
            }

            .head-info {
                .head-time {
                    font-size: 22rpx;
                    font-weight: 400;
                    color: #999999;
                }

                .name-box {
                    margin-bottom: 12rpx;

                    .name-text {
                        font-size: 24rpx;
                        font-weight: 500;
                        color: #666;
                    }

                    .tag-box {
                        background: rgba(0, 0, 0, 0.2);
                        border-radius: 21rpx;
                        line-height: 30rpx;
                        padding-right: 10rpx;
                        margin-left: 10rpx;

                        .tag-img {
                            width: 34rpx;
                            height: 34rpx;
                            margin-right: 6rpx;
                            border-radius: 50%;
                        }

                        .tag-title {
                            font-size: 18rpx;

                            font-weight: 500;
                            color: rgba(255, 255, 255, 1);
                            line-height: 20rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>
